<template>
  <view class="settings-container">
    <!-- 顶部导航栏 -->
    <view class="settings-header">
      <text class="header-title">课程表设置</text>
      <u-icon name="close" size="24" @click="backToTimetable"></u-icon>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card" @click="handleUserInfo">
      <u-avatar :src="userInfo.avatar" size="80"></u-avatar>
      <view class="user-info">
        <text class="username">{{ userInfo.username }}</text>
        <text class="school">{{ userInfo.school }}</text>
      </view>
      <u-icon name="arrow-right" color="#7a9bb5"></u-icon>
    </view>

    <!-- 设置选项列表 -->
    <scroll-view scroll-y class="settings-list">
      <!-- 帮助中心 -->
      <view class="setting-item" @click="handleHelp">
        <view class="item-left">
          <u-icon name="question-circle" color="#7a9bb5" size="20"></u-icon>
          <text>帮助中心</text>
        </view>
        <u-icon name="arrow-right" color="#7a9bb5"></u-icon>
      </view>

      <!-- 插件管理 -->
      <view class="setting-item" @click="handlePlugins">
        <view class="item-left">
          <u-icon name="grid" color="#7a9bb5" size="20"></u-icon>
          <text>插件管理</text>
        </view>
        <u-icon name="arrow-right" color="#7a9bb5"></u-icon>
      </view>

      <!-- 权限管理 -->
      <view class="setting-item" @click="handlePermissions">
        <view class="item-left">
          <u-icon name="lock" color="#7a9bb5" size="20"></u-icon>
          <text>权限管理</text>
        </view>
        <u-icon name="arrow-right" color="#7a9bb5"></u-icon>
      </view>

      <!-- 版本信息 -->
      <view class="setting-item" @click="handleVersion">
        <view class="item-left">
          <u-icon name="tags" color="#7a9bb5" size="20"></u-icon>
          <text>版本信息</text>
        </view>
        <text class="version-value">v{{ appVersion }}</text>
      </view>

      <!-- 关于我们 -->
      <view class="setting-item" @click="handleAbout">
        <view class="item-left">
          <u-icon name="info-circle" color="#7a9bb5" size="20"></u-icon>
          <text>关于我们</text>
        </view>
        <u-icon name="arrow-right" color="#7a9bb5"></u-icon>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="action-buttons">
      <u-button 
        type="primary" 
        shape="circle" 
        @click="switchAccount"
        customStyle="background-color: #a5b8c5; margin-bottom: 20rpx">
        切换账号
      </u-button>
      <u-button 
        type="error" 
        shape="circle" 
        @click="showLogoutDialog = true"
        customStyle="background-color: #c47a7a">
        退出登录
      </u-button>
    </view>

    <!-- 退出登录确认弹窗 -->
    <u-modal 
      :show="showLogoutDialog" 
      title="确认退出" 
      content="确定要退出当前账号吗？"
      showCancelButton
      @confirm="logout"
      @cancel="showLogoutDialog = false"></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
        username: '用户',
        school: 'XMU大学'
      },
      appVersion: '1.2.0',
      showLogoutDialog: false
    }
  },
  methods: {
    backToTimetable() {
      uni.switchTab({
      	url:'/pages/lession/lession'
      })
    },
    handleUserInfo() {
      uni.navigateTo({
        url: '/pages/user/userInfo'
      })
    },
    handleHelp() {
      uni.navigateTo({
        url: '/pages/settings/help'
      })
    },
    handlePlugins() {
      uni.navigateTo({
        url: '/pages/settings/plugins'
      })
    },
    handlePermissions() {
      uni.navigateTo({
        url: '/pages/settings/permissions'
      })
    },
    handleVersion() {
      uni.showModal({
        title: '版本信息',
        content: `当前版本：v${this.appVersion}\n最新版本：v${this.appVersion}\n已是最新版本`,
        showCancel: false,
        confirmText: '确定'
      })
    },
    handleAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    },
    switchAccount() {
      uni.showModal({
        title: '切换账号',
        content: '确定要切换账号吗？当前账号的本地数据将保留。',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
    },
    logout() {
      uni.showLoading({ title: '退出中...' })
      // 模拟退出操作
      setTimeout(() => {
        uni.hideLoading()
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }, 800)
    }
  },
  onLoad() {
    // 可以在这里获取实际的版本信息
    // #ifdef APP-PLUS
    plus.runtime.getProperty(plus.runtime.appid, (info) => {
      this.appVersion = info.version
    })
    // #endif
  }
}
</script>

<style lang="scss">
.settings-container {
  height: 100vh;
  background-color: $uni-bg-color;
  display: flex;
  flex-direction: column;
  
 .settings-header {
     padding: 30rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;  /* 添加相对定位 */
     border-bottom: 1rpx solid $uni-border-color;
     
     .header-title {
       position: absolute;  /* 绝对定位 */
       left: 50%;          /* 水平居中 */
       transform: translateX(-50%); /* 调整居中位置 */
       font-size: 36rpx;
       font-weight: bold;
       color: $uni-text-color;
     }
  }
  
  .user-card {
    margin: 30rpx;
    padding: 30rpx;
    background: linear-gradient(to right, rgba(122, 155, 181, 0.1), rgba(90, 124, 150, 0.1));
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    
    .user-info {
      flex: 1;
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      
      .username {
        font-size: 32rpx;
        font-weight: bold;
        color: $uni-text-color;
        margin-bottom: 10rpx;
      }
      
      .school {
        font-size: 26rpx;
        color: $uni-text-color-grey;
      }
    }
  }
  
  .settings-list {
    flex: 1;
    padding: 0 30rpx;
    
    .setting-item {
      padding: 30rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid $uni-border-color;
      
      .item-left {
        display: flex;
        align-items: center;
        
        text {
          margin-left: 20rpx;
          color: $uni-text-color;
        }
      }
      
      .version-value {
        color: $uni-text-color-grey;
		margin-right: 50rpx;
        font-size: 20rpx;
      }
    }
  }
  
  .action-buttons {
    padding: 30rpx;
    border-top: 1rpx solid $uni-border-color;
  }
}
</style>